<template>
    <view class="login-container">
        <!-- Logo -->
        <image src="/static/logo.png" class="logo" mode="widthFix"></image>

        <!-- 标题 -->
        <text class="title">用心呵护您的健康</text>

        <!-- 手机号码输入 -->
        <view class="input-group">
            <text class="label">手机号码</text>
            <view class="phone-input-wrapper">
                <text class="country-code">+86</text>
                <input v-model="phoneNumber" type="number" placeholder="请输入手机号码" class="phone-input" />
            </view>
        </view>

        <!-- 验证码输入 -->
        <view class="input-group">
            <text class="label">验证码</text>
            <view class="code-input-wrapper">
                <input v-model="verificationCode" type="number" placeholder="请输入验证码" class="code-input" />
                <button @click="sendVerificationCode" class="get-code-btn">获取验证码</button>
            </view>
        </view>

        <!-- 协议勾选 -->
        <view class="agreement">
            <checkbox v-model="agree" class="checkbox" />
            <text class="agreement-text">我已阅读并同意</text>
            <text class="policy-link" @click="goToPolicy">《用户隐私政策》</text>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" :disabled="!agree || !phoneNumber || !verificationCode" @click="handleLogin">
            登录
        </button>

        <!-- 其他选项 -->
        <view class="other-options">
            <navigator url="/pages/LoginPassword/LoginPassword" class="option-link">账号密码登录</navigator>
            <navigator url="/pages/Register/Register" class="option-link">注册新用户</navigator>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phoneNumber: '',
            verificationCode: '',
            agree: false,
        };
    },
    methods: {
        sendVerificationCode() {
            if (!this.phoneNumber) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                });
                return;
            }
            uni.showToast({
                title: '验证码已发送',
                icon: 'success'
            });
        },
        handleLogin() {
            if (!this.agree) {
                uni.showToast({
                    title: '请先同意用户协议',
                    icon: 'none'
                });
                return;
            }
            if (!this.phoneNumber || !this.verificationCode) {
                uni.showToast({
                    title: '请输入完整信息',
                    icon: 'none'
                });
                return;
            }
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            });
        },
        goToPolicy() {
            uni.navigateTo({
                url: '/pages/PrivacyPolicy/PrivacyPolicy'
            });
        }
    }
};
</script>

<style scoped>
.login-container {
    padding: 40rpx;
    background-color: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
}

.title {
    font-size: 36rpx;
    color: #333;
    margin-bottom: 80rpx;
    text-align: center;
}

.input-group {
    width: 100%;
    margin-bottom: 40rpx;
}

.label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.phone-input-wrapper {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 10rpx;
    overflow: hidden;
}

.country-code {
    width: 100rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #f0f0f0;
    color: #666;
    font-size: 28rpx;
}

.phone-input {
    flex: 1;
    padding: 0 20rpx;
    line-height: 80rpx;
    font-size: 28rpx;
}

.code-input-wrapper {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 10rpx;
    overflow: hidden;
}

.code-input {
    flex: 1;
    padding: 0 20rpx;
    line-height: 80rpx;
    font-size: 28rpx;
}

.get-code-btn {
    background-color: #fff;
    color: #007AFF;
    font-size: 28rpx;
    padding: 0 20rpx;
    line-height: 80rpx;
    border-left: 1px solid #ddd;
}

.agreement {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    font-size: 26rpx;
    color: #666;
}

.checkbox {
    margin-right: 10rpx;
}

.policy-link {
    color: #007AFF;
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    background-color: #00B400;
    color: white;
    font-size: 32rpx;
    padding: 30rpx 0;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}

.other-options {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 26rpx;
    color: #007AFF;
}

.option-link {
    color: #007AFF;
}

.login-container {
    padding: 40rpx;
    background-color: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    /* 限制最大宽度 */
    margin: 0 auto;
}

.phone-input-wrapper,
.code-input-wrapper {
    border: 1px solid #ddd;
    border-radius: 10rpx;
    overflow: hidden;
    width: 100%;
}

.get-code-btn {
    background-color: #f0f0f0;
    color: #007AFF;
    font-size: 28rpx;
    padding: 0 20rpx;
    line-height: 80rpx;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.login-btn {
    width: 100%;
    background-color: #00B400;
    color: white;
    font-size: 32rpx;
    padding: 30rpx 0;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}

.login-container {
    padding: 40rpx;
    background-color: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    /* 限制最大宽度 */
    margin: 0 auto;
}

.input-group {
    width: 100%;
    margin-bottom: 30rpx;
    /* 缩小间距 */
}

.phone-input-wrapper,
.code-input-wrapper {
    border: 1px solid #ddd;
    border-radius: 10rpx;
    overflow: hidden;
    width: 100%;
}

.phone-input,
.code-input {
    flex: 1;
    padding: 0 20rpx;
    line-height: 80rpx;
    font-size: 28rpx;
}

.get-code-btn {
    background-color: #f0f0f0;
    color: #007AFF;
    font-size: 28rpx;
    padding: 0 20rpx;
    line-height: 80rpx;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.login-btn {
    width: 100%;
    background-color: #00B400;
    color: white;
    font-size: 32rpx;
    padding: 30rpx 0;
    border-radius: 16rpx;
    /* 更圆润 */
    margin-bottom: 20rpx;
}

.title {
    font-size: 36rpx;
    color: #333;
    margin-bottom: 80rpx;
    text-align: center;
}

.label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.login-container {
    padding: 40rpx;
    background-color: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    /* 限制最大宽度 */
    margin: 0 auto;
}

.phone-input-wrapper,
.code-input-wrapper {
    border: 1px solid #d9d9d9;
    border-radius: 10rpx;
    overflow: hidden;
    width: 100%;
    background-color: #f0f8ff;
    /* 浅蓝色背景 */
}

.phone-input,
.code-input {
    flex: 1;
    padding: 0 20rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #333;
}

.get-code-btn {
    background-color: #fff;
    color: #007AFF;
    font-size: 28rpx;
    padding: 0 20rpx;
    line-height: 80rpx;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.login-btn {
    width: 100%;
    background-color: #00B400;
    color: white;
    font-size: 32rpx;
    padding: 20rpx 0;
    /* 减小内边距 */
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}

.agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 居中对齐 */
    margin-bottom: 40rpx;
    font-size: 26rpx;
    color: #666;
}

.login-container {
    padding: 40rpx;
    background-color: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
}

.logo {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
}

.title {
    font-size: 36rpx;
    color: #333;
    margin-bottom: 80rpx;
    text-align: center;
}

.input-group {
    width: 100%;
    margin-bottom: 30rpx;
}

.label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.phone-input-wrapper,
.code-input-wrapper {
    display: flex;
    border: 1px solid #d9d9d9;
    border-radius: 10rpx;
    overflow: hidden;
    width: 100%;
    background-color: #f0f8ff;
}

.country-code {
    width: 100rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #f0f0f0;
    color: #666;
    font-size: 28rpx;
}

.phone-input,
.code-input {
    flex: 1;
    padding: 0 20rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #333;
}

.get-code-btn {
    background-color: #fff;
    color: #007AFF;
    font-size: 28rpx;
    padding: 0 20rpx;
    line-height: 80rpx;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    font-size: 26rpx;
    color: #666;
}

.checkbox {
    margin-right: 10rpx;
}

.policy-link {
    color: #007AFF;
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    background-color: #00B400;
    color: white;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}

.other-options {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 26rpx;
    color: #007AFF;
}

.option-link {
    color: #007AFF;
}
</style>